import React from 'react';
import { ConfigProvider, Row, Col } from 'antd';

const App = () => {
  return (
    <ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
      <div>
        <h1>App</h1>
        <Row>
          <Col span={24}>col</Col>
        </Row>
        <Row>
          <Col span={12}>col-12</Col>
          <Col span={12}>col-12</Col>
        </Row>
        <Row>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
          <Col span={8}>col-8</Col>
        </Row>
        <Row>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
          <Col span={6}>col-6</Col>
        </Row>
      </div>
      <div>
        <h1>App2</h1>
        <Row>
          <Col span={8}>col-8</Col>
          <Col
            span={8}
            offset={8}>
            col-8
          </Col>
        </Row>
        <Row>
          <Col
            span={6}
            offset={6}>
            col-6 col-offset-6
          </Col>
          <Col
            span={6}
            offset={6}>
            col-6 col-offset-6
          </Col>
        </Row>
        <Row>
          <Col
            span={12}
            offset={6}>
            col-12 col-offset-6
          </Col>
        </Row>
      </div>
    </ConfigProvider>
  );
};

export default App;
